<template>
  <el-table
    :data="tableData"
    stripe
    :border="true"
    row-key="id"
    default-expand-all
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="菜单名称">
      <template #default="model">
        <el-icon size="14"
          ><component class="icons" :is="model.row.menuIcon"></component
        ></el-icon>
        {{ model.row.name }}
      </template>
    </el-table-column>
    <el-table-column
      prop="corporationName"
      label="所属公司"
      width="300"
      show-overflow-tooltip
    />
    <el-table-column
      prop="systemName"
      label="所属系统"
      width="300"
      show-overflow-tooltip
    />
    <el-table-column prop="path" label="菜单目录" />
    <el-table-column prop="component" label="菜单路径" width="200" />
    <el-table-column prop="isOpen" label="是否使用" align="center" width="100">
      <template #default="model">
        <el-switch
          :before-change="switchClick"
          v-model="model.row.isOpen"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="开启中"
          inactive-text="关闭中"
        />
      </template>
    </el-table-column>
    <el-table-column prop="userName" label="创建用户" align="center" width="100" />
    <el-table-column prop="createTime" label="创建时间" align="center" width="150" />
  </el-table>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getAllMenuTreeList } from "@/api/menu";
import { SysMenuOutPut } from "@/model/menu/menu";
//初始加载dom
onMounted(() => {
  getAllMenuTreeMsg();
});

//table数据
const tableData = ref<SysMenuOutPut[]>([]);
//获取table数据
const getAllMenuTreeMsg = () => {
  getAllMenuTreeList().then(({ data, code, msg }) => {
    tableData.value = data;
  });
};

//禁止点页面的滑块
const switchClick = function () {
  return new Promise((_, reject) => {
    return reject(new Error("Error"));
  });
};
</script>
<style scoped>
.rowStyle {
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
}
.colStyle {
  height: 50px;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
}
</style>
